<script setup>
/**
 * 目的：针对大数据体表格展示（虚拟加载解决渲染慢操作卡等问题）
 */
import { onMounted, ref } from 'vue';
import Request from '../request';
const rowH = 50; //行高
const showRowNum = 10; //展示行数
const colW = 80; //列宽
const showColNum = 6; //展示列数
const startScrollY = rowH * 2 - 10; //预留两行模拟滚动
const startScrollX = colW * 2 - 10; //预留两列模拟滚动
const tableData = ref([]);
const xSpace = ref(); //x滚动ref
const ySpace = ref(); //y滚动ref
const tableRef = ref(); //表格ref
let storeData = ref([]); //表格总数据
//表格宽高
let tableH;
let tableW;

onMounted(() => {
  Request.getJson('./data/test/bigData.json', (r) => {
    storeData.value = r.data.storeData;
    tableW = storeData.value[0].length * colW;
    tableH = storeData.value.length * rowH;
    xSpace.value.style.width = tableW + 'px';
    ySpace.value.style.height = tableH + 'px';
    setTableData(0, 0);
  });
});

function setTableData(marginTop, marginLeft) {
  const indexY = Math.round(marginTop / rowH);
  const indexX = Math.round(marginLeft / colW);
  let temp = storeData.value.slice(indexY, indexY + showRowNum + 2);
  let temp1 = [];
  for (let i = 0; i < temp.length; i++) {
    temp1.push(temp[i].slice(indexX, indexX + showColNum + 2));
  }
  tableData.value = temp1;
}

function scroll_move(e) {
  const div = e.target;
  const now_scrollTop = div.scrollTop;
  const now_scrollLeft = div.scrollLeft;
  let marginLeft;
  let marginTop;
  if (now_scrollTop < startScrollY) {
    //小于两行归零
    marginTop = 0;
  } else if (now_scrollTop > tableH - rowH * showRowNum - 10) {
    marginTop = tableH - rowH * showRowNum;
  } else {
    marginTop = now_scrollTop - startScrollY;
  }

  if (now_scrollLeft < startScrollX) {
    //小于两列归零
    marginLeft = 0;
  } else if (now_scrollLeft > tableW - colW * showColNum - 10) {
    marginLeft = tableW - colW * showColNum;
  } else {
    marginLeft = now_scrollLeft - startScrollX;
  }
  setTableData(marginTop, marginLeft);
  // 设置表格margin
  tableRef.value.style.marginTop = marginTop + 'px';
  tableRef.value.style.marginLeft = marginLeft + 'px';
}
</script>


<template>
  <div id="test">
    <div @scroll="scroll_move"
         class='tableBox'>
      <div ref="xSpace"
           class='xSpace' />
      <div ref="ySpace"
           class='ySpace' />
      <div class='table'
           ref="tableRef">
        <div class="row"
             v-for="(v,i) in tableData"
             :key="i">
          <div class="col"
               v-for="(col,k) in v"
               :key="k">
            {{col}}
          </div>
        </div>
      </div>
    </div>
    <h2>表格数据：{{ storeData?.length || 0}}行,{{ storeData[0]?.length || 0 }}列</h2>
  </div>
</template>


<style lang="scss">
#test {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .tableBox {
    width: 500px;
    height: 500px;
    overflow: scroll;
    .xSpace {
      height: 0;
      float: left;
    }
    .ySpace {
      width: 0;
      float: left;
    }

    .table {
      .row {
        display: flex;
        height: 50px;
        line-height: 50px;
        .col {
          flex-shrink: 0;
          height: 50px;
          width: 80px;
          border: 1px solid #000;
        }
      }
    }
  }
}
</style>